<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../static/js/base.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        body {
            background-image: url('../static/image/background2.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
            overflow: hidden;
            font-family: "微软雅黑";
        }

        .title {
            position: absolute;
            display: block;
            top: 4%;
            left: 20%;
        }

        .num1 {
            display: block;
            height: 60px;

        }

        .tltleword {
            position: absolute;
            display: block;
            top: 40px;
            left: 45%;
            font-size: 170%;
            font-weight: bold;
            both: none;
        }

        .content {
            position: absolute;
            display: block;
            float: left;
            top: 20%;
            left: 28%;
            font-family: "微软雅黑";
            font-size: 270%;
            font-weight: bold;
            both: none;
        }

        .aniuword {
            font-size: 15px;
            text-align: center;
            font-family: "微软雅黑";
            line-height: 20px;
        }

        .button1 {
            position: absolute;
            height: 42px;
            width: 120px;
            border-radius: 10px;
            border: 0px;
            background-color: #484848;
            top: 53%;
            left: 40%;
            font-weight: bold;
            text-align: center;
            outline: 0;
        }

        .button2 {
            position: absolute;
            height: 42px;
            width: 120px;
            border-radius: 10px;
            border: 0px;
            background-color: #cb3939;
            top: 53%;
            left: 50.5%;
            font-weight: bold;
            text-align: center;
            outline: 0;
        }

        .pop {
            display: none;
            position: absolute;
            top: 85px;
            margin: 0 auto;
            text-aligin: center;
            /*left: 525px;*/
            height: 320px;
            width: 320px;
            border: 0;
            background-color: #fff;
            border-radius: 15px;
        }

        .changepop1 {
            display: block;
            position: relative;
            top: 85px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            width: 320px;
            border: 0;
            background-color: #fff;
            border-radius: 15px;
        }

        .head1 {
            border-radius: 15px 15px 0 0;
            position: relative;
            width: 100%;
            top: 0px;
            height: 17%;
            border-bottom: 2px #9b9b9b solid;
            background-color: #fff;
            border-color: #cecece;

        }

        .head2 {
            border-radius: 0 0 15px 15px;
            position: relative;
            width: 100%;
            top: 0;
            height: 83%;
            background-color: #fff;
        }

        .popword {
            font-size: 25px;
            color: #9b9b9b;
            font-family: "微软雅黑";
            text-align: center;
            line-height: 65px;

        }

        .input-group {
            position: relative;
            border-radius: 5px;
            top: 50px;
            left: 35px;
            height: 33px;
            width: 260px;
            font-size: 18px;
            color: #9b9b9b;
            outline: 0;

        }

        .input-group-addon {
            height: 30px;

        }

        .text2 {
            position: relative;
            border-radius: 5px;
            top: 80px;
            left: 43px;
            height: 45px;
            width: 260px;
            font-size: 18px;
            color: #9b9b9b;
            outline: 0;

        }

        .btn-group {
            position: relative;
            top: 85px;
            left: 35px;
            outline: 0;
            width: 260px;
            
            color: #fff;

        }

        .kong {
            height: 40px;
        }

        .pop2 {
            display: none;
            position: absolute;
            top: 85px;
            left: 380px;
            height: 240px;
            width: 600px;
            border: 0;
            background-color: #fff;
            border-radius: 15px;
        }

        .changepop2 {
            display: block;
            position: relative;
            top: 85px;
            margin-left: auto;
            margin-right: auto;
            height: 380px;
            width: 600px;
            border: 0;
            background-color: #fff;
            border-radius: 15px;
        }

        .pophead1 {
            border-radius: 15px 15px 0 0;
            position: relative;
            width: 100%;
            top: 0px;
            height: 20%;
            border-bottom: 2px #9b9b9b solid;
            background-color: #fff;
            border-color: #cecece;

        }

        .popword1 {
            font-size: 25px;
            color: #9b9b9b;
            font-family: "微软雅黑";
            text-align: center;
            line-height: 50px;

        }

        .progress {
            position: absolute;
            width: 80%;
            top: 100px;
            left: 60px;
        }

        .zhushiword {
            font-size: 15px;
            color: #9b9b9b;
            font-family: "微软雅黑";
            position: relative;
            top: 80px;
            left: 68px;
        }

        .close {
            position: relative;
            top: 10px;
            left: -10px;
        }

        .close2 {
            position: absolute;
            top: 10px;
            left: 570px;
            height: 20px;
            font-size: 20px;
            color: #cecece;

        }

        .close2:hover {
            color: #9b9b9b
        }
        p
        {
            margin: 0 0 3px;
        }
        .stuimage
        {
            position: relative;
            left: 60px;
            top: 90px;
        }
        #imgpath
        {
            height: 160px;
        }
        .youruploadimage
        {
            font-size: 15px;
            color: #9b9b9b;
            font-family: "微软雅黑";
            margin: 0 0 10px 0;
        }
        .motto
        {
            font-size: 15px;
            color: #9b9b9b;
            font-family: "微软雅黑";
            margin: 0 0 10px 0;
            position: relative;
            top: 90px;
            left: 380px;

        }

    </style>

    <script type="text/javascript">


        function playpop1() {
            document.getElementById("pp1").className = 'changepop1';
        }

        function playpop2() {
            document.getElementById("pp2").className = 'changepop2';
            mystatus()
        }

        function playclose() {
            document.getElementById("pp1").className = 'pop';
        }
        function playclose2() {
            document.getElementById("pp2").className = 'pop2';
        }
    </script>
</head>

<body>
<div class="waikuo">
    
    <span>
        <button type="button" class="button1" id="but1" onclick="playpop1()">
            <p class="aniuword" id="login1" style="color:#f9f9f9">登入</p>
        </button>                                    
    </span>
    <span id="">
        <button type="button" class="button2" id="but2" onclick="playpop2()">
            <p class="aniuword" style="color:#f9f9f9">查看我的状态</p>
        </button>  
    </span>
    <div>

        <div class="pop" id="pp1">
            <div class="head1">
                <span class="glyphicon glyphicon-remove close" id="closeid" onclick="playclose()"></span>
                <p class="popword">账号密码登入</p>
            </div>
            <div class="head2">
                <div class="input-group">
                    <span class="input-group-addon">username</span>
                    <input type="text" class="form-control" placeholder="Username" name="loginname">
                </div>
                <div class="kong">

                </div>
                <div class="input-group">
                    <span class="input-group-addon">password</span>
                    <input type="text" class="form-control" name="loginpassword" placeholder="Password">
                    
                </div>
                <!-- Single button -->
                <div class="btn-group">
                    <button type="button" class="btn btn-primary btn-block" onclick="Loginweb()">Login</button>
                </div>


            </div>
        </div>
        <div class="pop2" id="pp2">
            <div class="pophead1">
                <span class="glyphicon glyphicon-remove close2" id="closeid2" onclick="playclose2()"></span>
                <p class="popword1">我的状态</p>
                <div class="progress">
                    <div class="progress-bar progress-bar-success" id="status1" style="width: 0%">
                        <span class="sr-only">35% Complete (success)</span>
                    </div>
                    <div class="progress-bar progress-bar-warning progress-bar-striped" id="status2" style="width: 0%">
                        <span class="sr-only">20% Complete (warning)</span>
                    </div>
                    <div class="progress-bar progress-bar-danger" id="status3" style="width: 0%">
                        <span class="sr-only">10% Complete (danger)</span>
                    </div>
                </div>
                <p class="zhushiword">&nbsp&nbsp●Green已登入&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp●Yellow
             已注册&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp●Red已上传图片 </p>
             
             <div class="motto">
                 <p>我的格言</p>
                <p id="motto">  
                </p>
                 
             </div>
            </div>
            <div class="stuimage">
                <p class="youruploadimage">你上传的图片</p>
                 <img src="../static/image/none.jpg" id="imgpath">
             </div>
        </div>


    </div>

</div>
</body>

</html>
